import React, {forwardRef} from 'react';
import { Text, View, StyleSheet,StatusBar } from 'react-native';
import { Pressable } from "native-base";
import DatePicker from 'react-native-date-picker'
import dayjs from 'dayjs/esm/index.js';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

type DatePickerProps = {
  mode?: string
  value: Date
  is24hourSource?: string
  onChange?: (value: Date) => void
}

// export default function FormDatePicker({mode='date', value=new Date(),is24hourSource='device',onChange}) {
export default function FormDatePicker(props:DatePickerProps) {

  const {mode='date', value=new Date(), is24hourSource='device',onChange} = props;
  const [open, setOpen] = React.useState(false);
  const [textvalue,setTextvalue] = React.useState(new Date());

  function handleOk(val:Date){
    setTextvalue(val);
    onChange && onChange(val);
  }

  return (
    <View>
      <Pressable w={130} style={{flex: 1,flexDirection: 'row',alignItems:'center',justifyContent:'center',borderWidth: 1,borderColor: 'grey',borderRadius:2}} onPress={()=>setOpen(true)}>
        <Text style={{flex: 1,textAlign: 'center'}}>{dayjs(textvalue.toISOString()).format('YYYY/MM/DD')}</Text>
        <Text><MaterialIcons name="calendar-month" size={30} color="grey" /></Text>
      </Pressable>
      <DatePicker
        modal
        open={open}
        mode={mode}
        date={value}
        onConfirm={(val: Date) =>{
          setOpen(false);

          handleOk(val);
        }}
        onCancel={()=> {
          setOpen(false);
        }}
      />
    </View>
  )
}
